<template>
  <div class="kapian">
    <div class="icon-list" v-if="typeName == '图标'">
      <div v-for="(x, y) in homeMenu" :key="y" @click="goPath(y)" :class="isEdit && editIdx == y ? 'active' : ''">
        <div :class="'iconfont icon-' + x.icon" :style="{ backgroundColor: x.color }"></div>
        <div class="word">{{ x.title }}</div>
      </div>
    </div>
    <div v-else-if="typeName == '卡片'" class="card-list">
      <div v-for="(x, y) in homeMenu" :key="y" @click="goPath(y)" :class="isEdit && editIdx == y ? 'active' : ''"
        :style="{ backgroundColor: x.color }">
        <div>
          <div :class="'iconfont icon-' + x.icon"></div>
          <div class="word">{{ x.title }}</div>
        </div>
      </div>
    </div>
    <div v-else-if="typeName == '工作'">
      <work />
    </div>
    <!-- <Calendar /> -->
    <!-- <clock /> -->
    <div class="control">
      <el-button @click="showEdit" type="success" v-if="!isEdit">管理</el-button>
      <template v-else>
        <el-button @click="handleAdd" type="primary">新增</el-button>
        <el-button @click="handleEdit" type="warning">编辑</el-button>
        <el-button type="danger" @click="handleDel">删除</el-button>
        <el-button @click="showEdit">取消</el-button>
        <!-- <el-button @click="testCom('test')">测试</el-button> -->
      </template>
    </div>
    <el-dialog :title="state.title" v-model="state.open" width="800px">
      <el-form ref="formRef" :model="form" size="default" label-width="150px">
        <el-form-item v-for="(x, y) in columns" :key="y" :label="x.title" :prop="x.name">
          <template v-if="x.name == 'color'">
            <el-input v-model="form.color" :placeholder="'请输入' + x.title" style="width: 150px;margin-right: 10px;" />
            <input type="color" v-model="form.color" />
          </template>
          <template v-else-if="x.name == 'icon'">
            <div style="margin-right: 10px;" :class="'iconfont icon-' + form.icon"></div>
            <el-input v-model="form.icon" :placeholder="'请输入' + x.title" style="width: 180px;margin-right: 10px;" />
            <el-button @click="() => { showSelectIcon = true }">选择图标</el-button>
          </template>
          <el-input v-else v-model="form[x.name]" :placeholder="'请输入' + x.title" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="display: flex;justify-content: right;">
        <div>
          <el-button type="primary" @click="submit">保 存</el-button>
          <el-button @click="() => { state.open = false }">取 消</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog title="选择图标" v-model="showSelectIcon" width="800px">
      <div class="icons-list">
        <div v-for="(x, y) in glyphs" @click="selectIcon(y)" :key="y" :class="selectIdx == y ? 'active' : ''">
          <div :class="'iconfont icon-' + x.font_class"></div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer" style="display: flex;justify-content: right;">
        <el-button type="primary" @click="saveSelect">保 存</el-button>
        <el-button @click="() => { showSelectIcon = false }">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import { glyphs } from '@/assets/font/iconfont.json'
import { queryData, getColumnList, addData, editData } from '@/apis/mysql'
import { ref, onMounted, reactive, watch } from 'vue'
import { useRouter } from 'vue-router'
import element  from '@/utils/element';
import system from '@/utils/system';
import global from '@/utils/global';
import codes from '@/utils/codes';
import { defalutSetStore } from '@/stores/index.js'
import work from '@/views/work/index.vue'
// import clock from './modules/clock.vue';
const router = useRouter()
const isEdit = ref(false)
const editIdx = ref(0)
const columns = ref([])
const form = ref({})
const formType = ref({})
const showSelectIcon = ref(false)
const selectIdx = ref(0)
const typeName = ref('图标')
const state = reactive({
  title: '',
  open: false
})
const homeMenu = ref([])


onMounted(() => {
  // document.title = '个人办公软件'
  getSetting()
  getColumns()
  getList()
})
const useDefalutSetStore = defalutSetStore()

watch(() => useDefalutSetStore.defalutSet.typeName, value => {
  typeName.value = value
  // console.log(value)
})

function getSetting() {
  const { defalutSet } = useDefalutSetStore
  typeName.value = defalutSet.typeName
}

function selectIcon(y) {
  selectIdx.value = y
}
function saveSelect() {
  let obj = form.value
  obj.icon = glyphs[selectIdx.value].font_class
  form.value = obj
  showSelectIcon.value = false
}
function goPath(y) {
  // console.log('/' + homeMenu.value[y].router)
  if (isEdit.value) {
    editIdx.value = y
  } else {
    router.push({
      path: '/' + homeMenu.value[y].router
    })
  }
}
function showEdit() {
  isEdit.value = !isEdit.value
}
function getList() {
  queryData({
    table: 'descks',
    type: true,
    sort: true,
    data: {
      visible: 1
    },
    query: {
      page: 1,
      show: 100
    }
  }).then(res => {
    // console.log(res)
    homeMenu.value = res.data
    // const arr = []
    // res.data.map((x, y) => {
    //   if (x.visible == 1) {
    //     arr.push(x)
    //   }
    // })
    // homeMenu.value = global.reSort(arr, 'sort')
  })
}

function getColumns() {
  getColumnList('descks').then(res => {
    columns.value = res.data
  })
}

function testCom(name) {
  const newHomeCom = codes.filter(x=> x.label == '桌面组件')[0].code
  let content = newHomeCom.replace(/demo/g, name)
  const path = __dirname.split('node')[0] + `src/renderer/src/views/${name}`
  system.exist(path).then(() => {
    addFile()
  }).catch(() => {
    system.addDir(path).then(() => {
      addFile()
    })
  })
  function addFile() {
    system.writeFile(path + '/index.vue', content).then(res => {
      // console.log(res)
    })
  }
}

function handleAdd() {
  form.value = {}
  state.open = true
  state.title = '新增'
  formType.value = 1
}

function handleEdit() {
  form.value = homeMenu.value[editIdx.value]
  state.open = true
  state.title = '编辑'
  formType.value = 2
}

function handleDel() {
  element.error('暂不支持删除')
}

function proxyToObject(proxy) {
  const obj = {};
  for (let prop in proxy) {
    if (Reflect.has(proxy, prop)) { // 使用Reflect.has检查属性是否存在，避免不必要的错误
      obj[prop] = Reflect.get(proxy, prop);
    }
  }
  return obj;
}

function submit() {
  let table = 'descks'
  let data = proxyToObject(form.value)
  data.update_time = global.formatDataTime(new Date())
  if (formType.value == 1) {
    data.create_time = global.formatDataTime(new Date())
    addData({ table, data }).then(res => {
      if (res.code == 1000) {
        element.success(res.msg)
        testCom(data.router)
        getList()
        state.open = false
      }
    })
  } else {
    editData({ table, data }).then(res => {
      if (res.code == 1000) {
        element.success(res.msg)
        getList()
        state.open = false
      }
    })
  }
}

</script>
<style scoped lang="scss">
.kapian {
  // width: calc(100vw - 20px);
  // height: calc(100vh - 120px);
  padding: 10px;
  position: relative;

  .control {
    position: absolute;
    right: 10px;
    bottom: 40px;
  }

  .icon-list {
    >div {
      border: 1px solid transparent;
    }

    .active {
      border: 1px solid #fff;
    }
  }

  .icons-list {
    display: flex;
    flex-wrap: wrap;

    >div {
      width: 36px;
      height: 36px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid #fff;

      >div {
        font-size: 20px;
      }
    }

    .active {
      border: 1px solid darkblue;
    }
  }

  .card-list {
    display: flex;
    flex-wrap: wrap;

    >div {
      width: 120px;
      height: 120px;
      // border: 1px solid #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 5px;
      cursor: pointer;

      >div {
        text-align: center;
        >div:nth-child(1){
          font-size: 32px;
        }
        >div{
          font-size: 16px;
        }
      }
    }

    .active {
      border: 1px solid #fff;
    }
  }

  .border {
    >div {
      border: 1px solid #000;
    }
  }
}
</style>
